<template>
	<!-- 论述 -->
	<view class="type_4">
		<view class="questionText" v-html="activeQuestion.questionText"></view>
		<view class="questionResources">
			<view class="questionResource" v-for="questionResource of activeQuestion.questionResources">
				<image :src="questionResource.href" mode="aspectFit" @click="previewImage(questionResource.href)">
				</image>
				<text>
					{{questionResource.resourceName}}
				</text>
			</view>
		</view>
		<view v-if="paperMode==1" class="textarea">
			<textarea placeholder="请输入内容" :maxlength="-1" auto-height v-model="activeAnswer.text"></textarea>
			<uni-section title="图片资源" type="circle" titleFontSize="1.4vw" :padding="true">
				<FileUploader mediaType="image" :initFileList="activeAnswer.imageList"
					@uploadFileList="updateImageList" />
			</uni-section>
			<uni-section title="视频资源" type="circle" titleFontSize="1.4vw" :padding="true">
				<FileUploader mediaType="video" :initFileList="activeAnswer.videoList"
					@uploadFileList="updateVideoList" />
			</uni-section>
		</view>



		<template v-if="paperMode==2 && activeRecord">
			<view class="recordCard">
				<view class="title">参考答案</view>
				<view class="answer">
					<template v-if="activeRecord.answer===null">无</template>
					<template v-else>
						{{activeRecord.answer.text}}
					</template>
				</view>
				<view v-if="activeRecord.answerDetail" class="answerDetail">
					{{activeRecord.answerDetail}}
				</view>
			</view>
			<view class="recordCard">
				<view class="title">我的答案</view>
				<view class="userAnswer">
					<template v-if="activeRecord.userAnswer.text===''
					&&activeRecord.userAnswer.imageList.length==0
					&&activeRecord.userAnswer.videoList.length==0
					">
						无
					</template>
					<template v-else>
						{{activeRecord.userAnswer.text}}

						<uni-section title="图片资源" type="circle" titleFontSize="1.4vw" :padding="true">
							<image class="listImage" v-for="image of activeRecord.userAnswer.imageList" :src="image"
								mode="aspectFit" @click="previewImage(image)">
							</image>
						</uni-section>
						<uni-section title="视频资源" type="circle" titleFontSize="1.4vw" :padding="true">
							<!-- <image :src="activeRecord.userAnswer.videoList[0]+'?x-oss-process=video/snapshot,t_0,m_fast,w_200,f_jpg'"></image> -->
<!-- 							<video class="listVideo" v-for="video of activeRecord.userAnswer.videoList" :src="video"
								controls></video> -->
							<view v-html="videoHtml"></view>

						</uni-section>

					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import FileUploader from "@/components/FileUploader";
	export default {
		props: ["paperMode", "activeQuestion", "initAnswer", "activeRecord"],
		components: {
			FileUploader
		},
		data() {
			return {
				activeAnswer: {
					text: "",
					imageList: [],
					videoList: []
				}
			}
		},
		computed: {
			videoHtml() {
				let videoList = this.activeRecord.userAnswer.videoList;
				let html = "";
				videoList.forEach(video => {
					html += `<video class="listVideo" src="${video}"
					 width="350" height="225"
					 poster="${video}?x-oss-process=video/snapshot,t_0,m_fast,w_350,f_jpg"
					 controls></video>`
				})
				return html
			}
		},
		watch: {
			"activeAnswer.text"() {
				this.$emit("updateAnswer", this.activeAnswer);
			}
		},
		created() {
			this.activeAnswer = this.initAnswer;
		},
		methods: {
			updateImageList(e) {
				this.activeAnswer.imageList = e;
				this.$emit("updateAnswer", this.activeAnswer);
			},
			updateVideoList(e) {
				this.activeAnswer.videoList = e;
				this.$emit("updateAnswer", this.activeAnswer);
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "./record.scss";

	.type_4 {
		.questionText {
			line-height: 2vw;
			white-space: pre-wrap;
		}

		.questionResources {
			margin-top: 1vw;
			display: flex;
			flex-wrap: wrap;

			.questionResource {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 0.5vw;

				image {
					width: 30vw;
					max-height: 30vw;
					margin-bottom: 0.5vw;
				}

				text {
					color: #999;
					max-width: 25vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 1.2vw;
					line-height: 2vw;
				}
			}
		}
	}

	.textarea {
		border: 1px solid #ccc;
		border-radius: 0.5vw;
		margin-top: 2vw;
		box-sizing: border-box;
		padding: 1vw;

		textarea {
			font-size: 1.4vw;
			width: 100%;
			min-height: 20vw;
		}
	}

	.listImage {
		width: 200px;
		height: 200px;
	}

	.listVideo {
		width: 350px;
		height: 225px;
	}
</style>